<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
    <div class="aui-header-1">
        <lv-group lvGutter="8px">
            <h1>{{ 'protection_clients_label' | i18n }}</h1>
            <a [href]="helpUrl" target="_blank" lv-link [lvIcon]="true">{{'common_help_word_label' | i18n}}</a>
            <aui-multi-cluster-switch (onChange)="onChange()"></aui-multi-cluster-switch>
        </lv-group>
    </div>
    <div class="aui-block aui-paginator-container">
        <div class="aui-operation">
            <lv-group [lvGutter]="groupCommon.middleRowGutter">
                <button lv-button lvType="primary" (click)="clientRegister()" auiRolePermission
                    [rolePermission]="roleOperationMap.manageClient" lv-popover [lvPopoverClosable]="true"
                    lvPopoverContent="{{'protection_guide_host_tip_label' | i18n}}" lvPopoverPosition="bottom"
                    lvPopoverClassName="customer-guide-tip-bk" lvPopoverTrigger="customize"
                    [(lvPopoverVisible)]="registerTipShow" [lvPopoverBeforeClose]="lvPopoverBeforeClose">
                    {{ 'common_register_label' | i18n }}
                </button>
                <button lv-button (click)="updateAgent()" [disabled]="updateAgentBtnDisabled" pmpermission
                    pmOperation='ModifyProtection'>
                    {{ 'protection_update_agent_label' | i18n }}
                </button>
                <button lv-button (click)="downloadBackupProxy(selection)" auiRolePermission
                    [rolePermission]="roleOperationMap.manageClient">
                    {{ 'protection_protect_agent_pkg_mangament_label' | i18n }}
                </button>
                <button lv-button (click)="SynchronizingConfigurations()" auiRolePermission
                    [rolePermission]="roleOperationMap.manageClient">
                    {{ 'protection_agent_update_backup_service_ip_label' | i18n }}
                </button>
                <button lv-button lv-dropdown [lvDropdownMenus]="moreMenus" *ngIf="moreMenus | find: 'hidden': false">
                    <span>{{'common_more_label' | i18n}}</span>
                    <i #lvDropdownTrigger lv-icon="lv-icon-triangle-down"></i>
                </button>
            </lv-group>
            <lv-group [lvGutter]="groupCommon.middleRowGutter">
                <lv-search [lvFocus]="true" [(ngModel)]="queryName" (lvSearch)="searchByName($event)"
                    lvPlaceHolder="{{'common_search_type_label'|i18n:['common_host_label'|i18n]}}">
                </lv-search>
                <button class="aui-button-icon" lv-button lvSize="auto" (click)="refresh()">
                    <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
                </button>
            </lv-group>
        </div>
        <div class="list-container">
            <lv-datatable [lvData]="tableData" (lvSortChange)="sortChange($event)" [lvPaginator]="page"
                lvResizeMode="expand" lvSelectionMode='multiple' [lvSelection]='selection'
                (lvSelectionChange)="selectionChange($event)" lvCompareWith="uuid" [lvScroll]="{ x: '100%' }" lvSort
                #lvTable lvAsync lvResize>
                <thead>
                    <tr>
                        <th lvShowCheckbox width='40px' [lvRowsData]='lvTable.renderData'>
                        </th>
                        <ng-container *ngFor="let col of columns">
                            <th *ngIf="col.isShow" [lvShowFilter]="col.filter" (lvFilterChange)="filterChange($event)"
                                [(lvFilters)]="col.filterMap" lvCellKey="{{ col.key }}" lvShowCustom lvFilterCheckAll
                                [lvShowSort]="col.isSort" [attr.width]="col.width">
                                <span lv-overflow>{{ col.label}}</span>
                                <div lvCustom *ngIf="col.key === 'uuid'">
                                    <aui-custom-table-search (search)="searchByUuid($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                                <div lvCustom *ngIf="col.key === 'name'">
                                    <aui-custom-table-search (search)="searchByName($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                                <div lvCustom *ngIf="col.key === 'version'">
                                    <aui-custom-table-search (search)="searchByVersion($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                                <div lvCustom *ngIf="col.key === 'endpoint'">
                                    <aui-custom-table-search (search)="searchByIp($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                                <div lvCustom *ngIf="col.key === 'sla_name'">
                                    <aui-custom-table-search (search)="searchBySlaName($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                                <div lvCustom *ngIf="col.key === 'sla_compliance'" class="resource-sla-help">
                                    <aui-sla-compliance-tooltip margin="true"></aui-sla-compliance-tooltip>
                                </div>
                                <div lvCustom *ngIf="col.key === 'authorized_user'">
                                    <aui-custom-table-search (search)="searchByAuthorizedUser($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                                <div lvCustom *ngIf="col.key === 'memo'">
                                    <aui-custom-table-search (search)="searchByRemark($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                                <div lvCustom *ngIf="col.key === 'labelList'">
                                    <aui-custom-table-search (search)="searchByLabel($event)"
                                        [filterTitle]="col.label"></aui-custom-table-search>
                                </div>
                            </th>
                        </ng-container>
                        <th width='144px' lvShowCustom>
                            {{'common_operation_label'|i18n }}
                        </th>
                        <th width='16px' style="padding: 0;" lvResizable="false">
                            <i lv-icon='lv-icon-col-setting' #colPopover='lvPopover' lv-popover
                                lvPopoverPosition='bottomRight' [lvPopoverContent]='colSelectTp' lvPopoverTheme='light'
                                lvPopoverTrigger='click' style="cursor: pointer;">
                            </i>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor="let item of lvTable.renderData;trackBy:trackByUuid">
                        <tr [ngClass]="{ 'lv-table-row-highlight': isActive(item) }">
                            <td width='40px' lvShowCheckbox [lvRowData]='item'>
                            </td>
                            <ng-container *ngFor="let col of columns">
                                <ng-container *ngIf="col.isShow">
                                    <td>
                                        <ng-container [ngSwitch]="col.key">
                                            <ng-container *ngSwitchCase="'name'">
                                                <lv-group lvGutter='8px'>
                                                    <div lv-overflow>
                                                        <span class="aui-link" id='outerClosable'
                                                            (click)="getDetail(item)">{{ item.name }}</span>
                                                    </div>
                                                    <span class="guide-recommend-label" *ngIf="showGuideNew(item)">
                                                        {{'protection_guide_new_resource_label' | i18n}}
                                                    </span>
                                                </lv-group>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'link_status'">
                                                <div class="link_status">
                                                    <aui-status [value]="item.link_status"
                                                        type="resource_Host_LinkStatus">
                                                    </aui-status>
                                                    <ng-container *ngIf="isMulti">
                                                        <span class="view-detail"
                                                            *ngIf="item.link_status==1 || item.link_status==0"
                                                            (click)="getStatusDetail(item)">
                                                            {{'common_view_label' | i18n}}
                                                        </span>
                                                    </ng-container>
                                                </div>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'cpuRate'">
                                                {{ item.link_status === 1 && (item.protectedAgentExtend?.cpuRate ||
                                                item.protectedAgentExtend?.cpuRate === 0) ?
                                                NumberToFixed(item.protectedAgentExtend?.cpuRate, 1) + '%' : '--'}}
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'memRate'">
                                                {{item.link_status === 1 && (item.protectedAgentExtend?.memRate ||
                                                item.protectedAgentExtend?.memRate === 0) ?
                                                NumberToFixed(item.protectedAgentExtend?.memRate, 1) + '%' : '--'}}
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'os_type'">
                                                {{ item.os_type | textMap: 'Os_Type' | nil}}
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'sub_type'">
                                                <span lv-overflow>{{ item.sub_type | textMap: 'Host_Proxy_Type' |
                                                    nil}}</span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'version'">
                                                <lv-group lvGutter="6px">
                                                    <span lv-overflow>{{ item.version | nil}}</span>
                                                    <span
                                                        *ngIf="item.extendInfo?.agentUpgradeable === '1' && 1 === item.link_status">
                                                        <i lv-icon="aui-icon-version-update" [lvColorState]="true"
                                                            class='version-update'
                                                            [lv-tooltip]="'protection_host_upgradeable_label'|i18n"></i>
                                                    </span>
                                                </lv-group>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'sla_name'">
                                                <ng-container *ngIf="item.sla_id; else emptyTpl">
                                                    <span class="aui-link" id='outerClosable'
                                                        (click)="getSlaDetail(item)" lv-overflow>
                                                        <sla-type [name]="item.sla_name"></sla-type>
                                                    </span>
                                                </ng-container>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'sla_status'">
                                                <aui-status [value]="item.sla_status" type="Sla_Status">
                                                </aui-status>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'protection_status'">
                                                <aui-status [value]="item.protection_status" type="Protection_Status">
                                                </aui-status>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'sla_compliance'">
                                                <aui-status [value]="item.sla_compliance" type="Sla_Compliance">
                                                </aui-status>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'trustworthiness'">
                                                <ng-container *ngIf="hostTrustOpen">
                                                    <aui-status [value]="item.trustworthiness"
                                                        type="hostTrustworthinessStatus">
                                                    </aui-status>
                                                </ng-container>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'src_deduption'">
                                                <span lv-overflow>
                                                    {{ (item.extendInfo?.src_deduption === 'true' ? 'common_yes_label' :
                                                    'common_no_label')  | i18n}}
                                                </span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'log_level'">
                                                <span lv-overflow>
                                                    {{item.extendInfo?.logLeve?(item.extendInfo?.logLeve | textMap:
                                                    'Log_Level') : 'common_info_label'|i18n}}
                                                </span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'lan_free'">
                                                <span lv-overflow>
                                                    {{(item.extendInfo?.isAddLanFree === '1' ?
                                                    'protection_configured_status_label'
                                                    : 'protection_not_configured_status_label') | i18n}}
                                                </span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'install_path'">
                                                <span lv-overflow>{{item.extendInfo?.install_path | nil}}</span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'isShared'">
                                                <span lv-overflow>
                                                    {{(item.protectedAgentExtend?.isShared ?
                                                    'switch_status_on_label' : 'switch_status_off_label') | i18n}}
                                                </span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'memo'">
                                                <span lv-overflow>
                                                    {{item.extendInfo?.tag | nil}}
                                                </span>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'endpoint'">
                                                <ng-container
                                                    *ngIf="item.extendInfo?.subNetFixedIp && item.extendInfo?.subNetFixedIp !== item.endpoint; else elseIpTemplate">
                                                    <span lv-overflow>{{item.endpoint |
                                                        nil}}({{item.extendInfo?.subNetFixedIp |nil}})</span>
                                                </ng-container>
                                                <ng-template #elseIpTemplate>
                                                    <span lv-overflow>{{item.endpoint | nil}}</span>
                                                </ng-template>
                                            </ng-container>
                                            <ng-container *ngSwitchCase="'labelList'">
                                                <ng-container *ngIf="item?.labelList?.length; else emptyTpl">
                                                    <lv-tag [ngModel]="item?.showLabelList" [lv-tooltip]="TagTpl"></lv-tag>
                                                    <ng-template #TagTpl>
                                                        <lv-tag [ngModel]="item?.hoverLabelList"></lv-tag>
                                                    </ng-template>
                                                </ng-container>
                                            </ng-container>
                                            <ng-container *ngSwitchDefault>
                                                <span lv-overflow>{{item[col.key] | nil}}</span>
                                            </ng-container>
                                        </ng-container>
                                    </td>
                                </ng-container>
                            </ng-container>
                            <td width='144px'>
                                <lv-operation-menu [lvItemsFn]="optsCallback" [lvData]="item"></lv-operation-menu>
                            </td>
                            <td></td>
                        </tr>
                    </ng-container>
                </tbody>
            </lv-datatable>
        </div>
        <div class="aui-paginator-wrap">
            <lv-paginator #page [lvPageSizeOptions]="sizeOptions" [lvPageSize]="pageSize" [lvTotal]="total"
                [lvPageIndex]="pageIndex" (lvPageChange)="pageChange($event)" [hidden]="!lvTable.renderData.length">
            </lv-paginator>
        </div>
    </div>
</div>

<ng-template #emptyTpl>
    --
</ng-template>

<ng-template #colSelectTp>
    <column-filter-tpl [tableKey]="tableColumnKey" [columns]="columns"></column-filter-tpl>
</ng-template>

<ng-template #contentTpl>
    <div class="aui-text-help-sm gutter-column">
        {{'common_export_log_tip_label'| i18n}}
    </div>
    <lv-form [formGroup]="formGroup" class="aui-gutter-column-xxl">
        <lv-form-item>
            <lv-form-label>
                {{ 'common_package_name_label' | i18n }}
            </lv-form-label>
            <lv-form-control [lvErrorTip]='nameErrorTip'>
                <input lv-input formControlName='fileName' />
            </lv-form-control>
        </lv-form-item>
    </lv-form>
</ng-template>
